<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电路图查看器</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #fff;
        }
        #circuit-container {
            width: 100%;
            height: 100vh;
            transform-origin: 0 0;
            transition: transform 0.3s ease;
        }
    </style>
</head>
<body>
<div id="circuit-container"></div>

<script>
    // 从URL参数获取电路图数据
    const urlParams = new URLSearchParams(window.location.search)
    const circuitData = JSON.parse(decodeURIComponent(urlParams.get('data')))

    // 缩放比例
    let currentScale = 1.0

    // 渲染电路图
    function renderCircuit(data) {
        const container = document.getElementById('circuit-container')
        // 这里根据实际的JSON数据结构来渲染电路图
        // 示例：假设JSON中包含SVG格式的电路图
        if (data.svg) {
            container.innerHTML = data.svg
        } else {
            container.innerHTML = '<div style="padding: 20px; color: red;">无法解析电路图数据</div>'
        }
        applyScale()
    }

    // 应用缩放
    function applyScale() {
        const container = document.getElementById('circuit-container')
        container.style.transform = `scale(${currentScale})`
    }

    // 监听父窗口的消息
    window.addEventListener('message', (event) => {
        if (event.data.type === 'setScale') {
            currentScale = event.data.scale
            applyScale()
        }
    })

    // 初始渲染
    renderCircuit(circuitData)
</script>
</body>
</html>